<template>
  <div>
    <div class="content">
      <el-form
        ref="form"
        :model="form"
        label-width="300px"
        style="width: 800px"
        size="medium"
      >
        <el-form-item label="SN码:" prop="sn">
          <el-input
            id="scanner-input"
            v-model="form.sn"
            type="textarea"
            placeholder="输入SN码"
            :autosize="{ minRows: 2, maxRows: 5 }"
            style="width: 400px; height: 50px"
            @keydown.enter.native="handleEnter"
          />
        </el-form-item>
      </el-form>
      <div
        v-if="materialList.length != 0"
        style="width: 60vw; margin-top: 20px"
      >
        <span style="font-size: 20px">物料列表</span>
        <el-table :data="materialList" row-key="materialList" height="700px">
          <el-table-column label="物料编号" align="center" prop="itemCode" />
          <el-table-column label="物料名称" align="center" prop="itemName" />
          <el-table-column
            label="缺料数量"
            align="center"
            prop="quantity ||unit "
          >
            <template slot-scope="scope">
              {{ scope.row.quantity + scope.row.unit }}
            </template>
          </el-table-column>
          <el-table-column label="工序" align="center" prop="processName" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getMaterialShortage } from "@/api/apppro/index";
export default {
  name: "materialShortage",
  props: {
    formObj: Object,
  },
  data() {
    return {
      form: {},
      //物料信息
      materialList: [],
    };
  },
  created() {
    console.log("缺料详情");
  },
  methods: {
    // snbutton(e) {
    //   var myInputOrder = document.getElementById("scanner-input");
    //   myInputOrder.onkeydown = (even) => {
    //     console.log(even, "=====even=====");
    //     if (even.key == "Enter") {
    //       // let params ={
    //       //     snCode :e
    //       // }
    //       // console.log(params,'params');
    //       // console.log(e,'eee');
    //       getMaterialShortage(e).then((res) => {
    //         console.log(res, "缺料详情res");
    //         if(res.code  == 200){
    //             this.materialList =res.data
    //         }
    //       }).catch(error=>{
    //         this.materialList = []
    //       });
    //     }
    //   };
    // },
    handleEnter(e) {
      console.log(this.form.sn);
      getMaterialShortage(this.form.sn)
        .then((res) => {
          console.log(res, "缺料详情res");
          if (res.code == 200) {
            this.materialList = res.data;
          }
        })
        .catch((error) => {
          this.materialList = [];
        });
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.content ::v-deep .el-form-item__label {
  font-size: 20px;
  margin-left: 80px;
}
.content ::v-deep .el-input--medium {
  font-size: 20px;
  // margin-left: 50px;
}
</style>
